<style type="text/css">
    div#rainbow_image_style_widget {
        margin-top:20px;
    }
    div.rainbowStyleWidget {
        width:70px;
        height:70px;
        border:5px solid #808080;
        margin:0 19.75px;
        float:left;
        background-color: white;
    }
    div.rainbowStyleWidgetAvailable {
        border:5px solid #00bfff;
    }
    div.rainbowStyleWidgetSelected {
        border:5px solid #ba55d3;
    }
    div.rainbowStyleWidgetAvailable:hover {
        cursor:pointer;
    }
    div.rainbowStyleWidget:nth-child(6n) {
        float:none;
        margin-left:617.25px;
        margin-top:20px;
    }
</style>
<div id="rainbow_image_style_widget">
    <div>
        <label class="rainbowTitle">布局</label>
    </div>
    <div>
        {% if form.fields.layout.choices %}
            {% for choice in form.fields.layout.choices %}
                {% if choice.1 == "SINGLE_PHOTO_PER_FRAME" %}
                    <div id="rainbow_image_style_widget_{{ choice.0 }}" class="rainbowStyleWidget rainbowStyleWidgetAvailable">
                        <div style="margin:10px;border:5px solid #00bfff;width:40px;height:40px;"></div>
                        <input type="hidden" name="rainbow_image_layout" value="{{ choice.0 }}"/>
                    </div>
                {% elif choice.1 == "V_LIST_FRAME" %}
                    <div id="rainbow_image_style_widget_{{ choice.0 }}" class="rainbowStyleWidget rainbowStyleWidgetAvailable">
                        <input type="hidden" name="rainbow_image_layout" value="{{ choice.0 }}"/>
                    </div>
                {% elif choice.1 == "DOUBLE_LINE_FRAME" %}
                    <div id="rainbow_image_style_widget_{{ choice.0 }}" class="rainbowStyleWidget rainbowStyleWidgetAvailable">
                        <input type="hidden" name="rainbow_image_layout" value="{{ choice.0 }}"/>
                    </div>
                {% elif choice.1 == "MAIN_TOP_DOUBLE_LINE_FRAME" %}
                    <div id="rainbow_image_style_widget_{{ choice.0 }}" class="rainbowStyleWidget rainbowStyleWidgetAvailable">
                        <input type="hidden" name="rainbow_image_layout" value="{{ choice.0 }}"/>
                    </div>
                {% elif choice.1 == "MAIN_BOTTOM_DOUBLE_LINE_FRAME" %}
                    <div id="rainbow_image_style_widget_random" class="rainbowStyleWidget rainbowStyleWidgetAvailable">
                        <input type="hidden" name="rainbow_image_layout" value="{{ choice.0 }}"/>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="rainbowStyleWidget"></div>
        {% endif %}
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("div.rainbowStyleWidgetAvailable").click(function(){
            $("div.rainbowStyleWidgetSelected").removeClass("rainbowStyleWidgetSelected");
            var layout = $(this).find("input[type='hidden']").val();
            var layoutSelect = $("div#rainbow_image_action_widget").find("form").find("select#id_layout");
            layoutSelect.find("option").removeAttr("selected");
            layoutSelect.find("option[value='" + layout + "']").attr("selected", "selected");
            $(this).addClass("rainbowStyleWidgetSelected");
        });
    });
</script>